<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/simpleCart.min.js"></script>
	<script type="text/css">
		.error{
		color: #ff0000;
		font-weight: bold;
		font-size: 20px;
		/*text-align: center;*/
		}
	</script>
</head>
<body>

	<!--header-->
	<jsp:include page="/header.jsp">
		<jsp:param name="flag" value="10"></jsp:param>
	</jsp:include>
	<!--//header-->


	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<c:if test="${!empty msg }">
					<div class="alert alert-danger">${msg }</div>
				</c:if>
				<form action="${pageContext.request.contextPath}/user_rigister" method="post" onsubmit="return checkForm()">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color:red;">*</label></span>
							<input type="text" name="username" placeholder="请输入用户名" required="required">
						</div>
						<div class="input">
							<span>邮箱 <label style="color:red;">*</label></span>
							<input type="text" name="email"  placeholder="请输入邮箱" required="required">
						</div>
						<div class="input">
							<span>密码 <label style="color:red;">*</label></span>
							<input type="password" name="password" placeholder="请输入密码" required="required">
						</div>
						<div class="input">
							<span>收货人<label></label></span>
							<input type="text" name="name" placeholder="请输入收货">
						</div>
						<div class="input">
							<span>收货电话<label></label></span>
							<input type="text" name="phone" id="phone" placeholder="请输入收货电话">
						</div>
						<div class="input">
							<span>收货地址<label></label></span>
							<input type="text" name="address" placeholder="请输入收货地址">
						</div>
						<div class="input">
							<span>发送验证码<label></label></span>
							<input type="text" name="verify" placeholder="请输入验证码">
							<input type="button" value="获取验证码" id="verify">
							<div class="error">

							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="register-but text-center">
					   <input type="submit" value="提交">
					   <div class="clearfix"> </div>
					</div>
				</form>
				<div class="clearfix"> </div>
			</div>
	    </div>
	</div>
	<!--//account-->

	




	<!--footer-->
	<jsp:include page="/footer.jsp"></jsp:include>
	<!--//footer-->

	<script>
		$(function () {
			// 获取验证码
			var $sendBtn = $("#verify");
			var clickSendBtn =  function () {
				var phone = $("#phone").val();
				if (phone != '' && /^1[0-9]{10}$/.test(phone)){
					$.getJSON("${pageContext.request.contextPath}/verify?phone=" + phone,{},function (data) {
						if (data.canSend == false){
							alert("剩余" + data.ttl + "秒后可发送");
							return;
						}
						if(data.sended == "2"){
						    alert("手机号已被注册");
                        }else if (data.sended){
							alert("发送成功!");
							$sendBtn.addClass("disabled");
							$sendBtn.off("click");
							//$("#verify").prop("disabled",true);
							var count = 60;
							var intervalId = setInterval(function () {
								if (count == 0){
									//$("#verify").prop("disabled",false);
									$sendBtn.val("获取验证码");
									$sendBtn.removeClass("disabled");
									$sendBtn.on("click",clickSendBtn);
									clearInterval(intervalId);
								}else{
									$sendBtn.val("剩余" + count--  + "秒");
								}
							},1000);
						}else{
							alert("发送失败!");
						}
					});
				}else{
					alert("请输入正确的手机号码");
				}
			}
			$sendBtn.on("click",clickSendBtn);
		});
		function checkForm() {
			let email = $("[name=email]").val().trim();
			let regemail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)){
				alert("请输入正确的邮箱");
				return false;
			}
			return true;
		}
	</script>
</body>
</html>